/*
 * @Author: luoqi
 * @Date: 2022-03-29 10:50:06
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-27 16:03:36
 * @Description: 
 */
import React, { useState } from 'react';
import { Button, Modal, Form, Input, Radio, Select, Upload, message } from 'antd';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;

const Addclassify = (props) => {
  const { departmentTree, partTree } = props.types;

  const [isModalVisible, setIsModalVisible] = useState(false);
  //部位或科室
  const [value, setValue] = useState(0);
  const [form] = Form.useForm();
  //一级分类或二级分类
  const [type, setType] = useState(1)

  //上传图片
  const [imgUrl, setImgUrl] = useState()
   //选中的父级类别
   let [mypid,setPid]=useState()  
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form.submit()
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  //添加类别
  const onFinish = (values) => {
    // console.log('Success:', values);
    let { name, type, status, perentClassify } = values
    axios({
      url: '/classify/upsert',
      method: 'post',
      data: qs.stringify({
        iconImg: imgUrl,
        name: name,
        type: type,
        status: status,
        pid: mypid
      })
    }).then(res => {
      console.log(res);
      if (res.code == '200') {
        message.success(`添加成功`);
        props.setNum(1);
        //清空表单
        form.resetFields()
        //关闭
        setIsModalVisible(false);
      }

    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  const onChange = e => {
    let value=e.target.value
    setValue(value);
    // handleChange(type)
    setPid(value==0?partTree[0].id.toString():departmentTree[0].id.toString())
  };
  //一级分类或二级分类
  function handleChange(value1) {
    setType(value1)
  }
  //二级分类父级类别
  function handleChange1(value) {
    setPid(value)
  }

  //上传文件
  const props1 = {
    name: 'file',
    action: '/api/upload',
    onChange(info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file.response);
        let { fileName } = info.file.response
        setImgUrl(fileName)
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  return (
    <div>
      <Button type="success" icon={<PlusOutlined />} onClick={showModal}>
        添加
      </Button>
      <Modal title="添加分类" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
        cancelText="取消">
        <Form
          name="basic"
          form={form}
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{ type: 0, level: 1, status: 1, name: '' }}
        >
          <Form.Item
            label="分类名称"
            name="name"
            rules={[{ required: true, message: '请输入分类名称' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="类型"
            name="type"
          >
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={0}>按部位</Radio>
              <Radio value={1}>按科室</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="分类级别"
            name="level"
          >
            <Select value={1} style={{ width: 120 }} onChange={handleChange}>
              <Option value={1}>一级</Option>
              <Option value={2}>二级</Option>
            </Select>
          </Form.Item>
          {type == 1 ? <Form.Item
            label="上传icon图片"
          >
            <Upload {...props1}>
              <Button icon={<UploadOutlined />}>上传icon图片</Button>
            </Upload>
          </Form.Item>
            : <Form.Item
              label="选择父级类别"
            >
              <Select style={{ width: 120 }} value={mypid} onChange={handleChange1}>
                {value === 0 ? partTree.map(item => {
                  return <Option key={item.id} value={item.id.toString()}>{item.name}</Option>
                }) : departmentTree.map(item => {
                  return <Option key={item.id} value={item.id.toString()}>{item.name}</Option>
                })}
              </Select>
            </Form.Item>}


          <Form.Item
            label="类别状态"
            name="status"
          >
            <Radio.Group onChange={onChange} value={value} >
              <Radio value={1}>可用</Radio>
              <Radio value={2}>不可用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default connect(
  state => ({ types: state.types }),
  {}
)(Addclassify);
